<template>
  <v-card>
    <div class="d-flex">
      <div>
        <v-card-title class="text-base font-semibold text-[#736B7D]">
          {{ statTitle }}
        </v-card-title>
        <v-card-text class="d-flex align-center">
          <h2 class="text-2xl font-semibold mt-3 text-[#736B7D]">
            {{ statistics !== '' ? statistics : '——' }}
          </h2>
          <span
            class="text-xs ms-1"
            :class="checkChange(change) ? 'success--text' : 'error--text'"
          >
            {{ change }}
          </span>
        </v-card-text>
        <v-card-text class="pt-1">
          <v-chip
            small
            :color="chipColor"
            class="v-chip-light-bg font-semibold"
            :class="`${chipColor}--text`"
            v-if="chipColor"
          >
            {{ chipText }}
          </v-chip>
          <div class="text-[#8B8D92]" v-else>{{ chipText }}</div>
        </v-card-text>
      </div>
      <v-spacer>
        <div v-if="showMore" class="more-btn">
            <v-menu activator="parent" bottom offset-y>
              <template #activator="{ on, attrs }">
                <span v-bind="attrs" v-on="on">
                  <v-icon color="#736B7D">mdi-dots-vertical</v-icon>
                </span>
              </template>

              <v-list class="bg-white reward-more-list">
                <v-list-item @click="toTeam">
                  <v-list-item-title>团队列表</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
        </div>
      </v-spacer>
      <div class="illustrator-img">
        <v-img :width="avatarWidth" :src="avatar"></v-img>
      </div>
    </div>
  </v-card>
</template>

<script setup lang="ts">
import { toRefs } from 'vue';
import { useRouter } from 'vue-router';

let router = useRouter()

interface StatisticsCardWithImgProps {
  statTitle: string;
  statistics: number | string;
  change?: string;
  chipText: string;
  chipColor?: string;
  avatar: string;
  avatarWidth: string;
  showMore: boolean;
}

const props = withDefaults(defineProps<StatisticsCardWithImgProps>(), {
  statTitle: '',
  statistics: 0,
  change: '',
  chipText: '',
  chipColor: '',
  avatar: '',
  avatarWidth: '',
  showMore: false,
});
const {
  statTitle,
  chipText,
  chipColor,
  avatar,
  avatarWidth,
  statistics,
  change,
  showMore,
} = toRefs(props);

const checkChange = value => {
  const firstChar = value.charAt(0);
  if (firstChar === '+') {
    return true;
  }

  return false;
};

let toTeam = () => {
  router.push('/team')
}

</script>

<style lang="scss" scoped>
.illustrator-img {
  position: absolute;
  right: 5%;
  bottom: 0;
}

.v-application {
  &.v-application--is-rtl {
    .illustrator-img {
      left: 5%;
      right: unset;
    }
  }
}

.more-btn {
  padding: 8px 8px;
  display: flex;
  justify-content: flex-end;
  z-index: 1;
  position: relative;
}
</style>
